<!--  -->
<template>
    <div>
        <template >
                    <el-form label-position="top" label-width="80px">
                    <el-form-item label="图书名称">
                        <el-input v-model="BookName"></el-input>
                        <i style="color:red">添加图书时请不要加《书名号》</i>
                    </el-form-item>
                    <el-form-item label="图书作者">
                        <el-input v-model="BookAuthor"></el-input>
                    </el-form-item>
                    <el-form-item label="图书地址">
                        <el-input v-model="BookLocation"></el-input>
                    </el-form-item>
                    <el-form-item label="图书库存">
                        <el-input v-model="BookSum"></el-input>
                    </el-form-item>
                    <el-form-item class="button">
                    <el-button type="primary" @click="AddBook">立即创建</el-button>
                    <el-button @click="clear">重置</el-button>
                    </el-form-item>
                    </el-form>
         
          </template>
    </div>
    </template>
    
    <script>
    export default {
    data() {
    return {
        BookName: '',
          BookAuthor: '',
          BookLocation: '',
          BookSum:''
    }
    },
    //生命周期 - 创建完成（访问当前this实例）
    created() {
    
    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
    
    },
    methods:{
        AddBook(){
        var url=`http://localhost:3000/AddBooks?BookName=${this.BookName}&BookAuthor=${this.BookAuthor}&BookLocation=${this.BookLocation}&BookSum=${this.BookSum}`
          if(this.BookName!==''&this.BookAuthor!==''&this.BookLocation!==''&this.BookSum!==''){
              this.axios.get(url).then(res=>{
                if(res.data.code==201){
                  // alert("这本书已经添加过了")
                  this.open4()
                }else{
                  // alert("添加成功，快去看看吧")
                  this.open4()
                  this.clear()
                }
              })
          }else{
            alert("请填写内容")
          }
        },
        clear(){
            this.BookName=''
            this.BookAuthor=''
            this.BookLocation=''
            this.BookSum=null
            // location.reload()  页面重新加载
        },
        open1() {
        this.$notify({
          title: '成功',
          message: '书籍添加成功,快去看看吧',
          type: 'success'
        });
      },
      open4() {
        this.$notify.error({
          title: '错误',
          message: '这本书已经添加过了'
        });
      }
    }
    }
    </script>
    <style scoped>
    /* @import url(); 引入css类 */
            .button{
                margin-left: 35%;
                
            }
            .button button{
                margin: 0px 20px;
                
            }
    </style>